<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="bottom">
            <span class="go">我的订单</span>
        </div>
    </div>
</body>
</html>
<script src="js/get.js"></script>
<script src="js/request.js"></script>
<script>
    //打开页面 渲染默认数据
    function getdom(){
        request('/titleList?title=1&&name=热销','GET',null,function(dat){
            //对数据进行处理；
            dat=JSON.parse(dat);

            //结构数据
            let {list,content}=dat;
            
            //结合数据渲染左侧导航
            createTitle(list,$('.left'))

            //结合数据渲染right内容
            createContent(content,$('.right'))

            //点击左边导航 实现数据更改  页面更新
            el('.left p').forEach(item=>{
                item.onclick=function(){
                    let ind=this.innerHTML
                    console.log(ind)
                    request('/titleList?title=0&&name='+ind,'GET',null,function(dat){
                        dat=JSON.parse(dat);
                        let {content}=dat;
                        console.log(content)
                        createContent(content,$('.right'))
                        getclick(el('.right .btn'))
                    })
                }
            })

            //获取实参按钮
            getclick(el('.right .btn'))
        })
    }
    getdom()

    //封装一个创建左侧列表的方法
    function createTitle(data,parent){
        parent.innerHTML=data.map(item=>{
            return `<p>${item}</p>`
        }).join('')
    }
    //封装一个创建右侧的方法
    function createContent(cont,parent){
        parent.innerHTML=`<div class="pro">
                    <div class="pro-title">
                        <h4>${cont[0].title}</h4>
                        <p>${cont[0].subTitle}</p>
                    </div>
                    <ul class="pro-list">
                        ${cont[0].shopmenuFoods.map(item=>{
                            return `<li>
                                    <div><img src="${item.imgSrc}"/></div>
                                    <div>
                                        <p class="name">${item.name}</p>
                                        <p class="num">${item.mute} 份</p>
                                        <p class="price">${item.price}￥</p>
                                    </div>
                                    <div class="btn">点击加入购物车</div>
                                </li>`
                        }).join('')}
                    </ul>
        </div>`
    }
    
    //封装一个点击添加购物车的方法
    function getclick(list){
        list.forEach((item,index)=>{
            item.onclick=function(){
                // console.log(el('.right .name')[index])
                let obj={};
                obj.name=el('.name')[index].innerHTML
                console.log(parseInt(el('.num')[index].innerHTML))
                if(parseInt(el('.num')[index].innerHTML)===0){
                    
                    var n=parseInt(el('.num')[index].innerHTML)
                    n++;
                    el('.num')[index].innerHTML=n+' 份'
                    obj.num=el('.num')[index].innerHTML
                }else{
                    obj.num=el('.num')[index].innerHTML
                }
                
                obj.price=el('.price')[index].innerHTML
               
                console.log(obj)
                request('/shop?user='+JSON.stringify(obj),'GET',null,function(dat){
                    console.log(dat)
                    dat=JSON.parse(dat);
                    let {code}=dat;
                    if(code===1){
                        alert('已有商品')
                    }else{
                        alert('添加成功')
                    }
                })
            }
        })
    }

    //点击我的订单跳转到购物车页面
    $('.go').onclick=function(){
        location.href='/gouwu.html'
    }
</script>